<template>
	<view class="area-b">
		<u-navbar title="开通VIP" back-icon-color="#ffffff" title-color="#ffffff" :background="{backgroundColor:'#131210'}" :border-bottom="false">
		</u-navbar>
		<view class="banner">
			<image class="img" src="/static/images/vip_banner.png" mode="aspectFill"></image>
			<text class="expire" v-if="userInfo.vip">到期时间：{{userInfo.vipEndDate.slice(0,10)}}</text>
		</view>
		<scroll-view scroll-x class="pick-box">
			<view class="item" :class="{cur:idx==subIdx}" v-for="(item,idx) in curPack.leveList" :key="idx" @tap="changeLeve(idx)">
				<view class="">
					<text class="u-font-32 text-bold">{{item.name}}</text>
				</view>
				<view class="">
					<text class="u-font-28 u-m-r-6">¥</text>
					<text class="u-font-50 text-bold">{{item.price}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="u-m-x-30 u-m-t-40">
			<view @tap="curMode=index" v-for="(mode,index) in modes" :key="index"
				class="u-flex u-col-center u-p-20">
				<view class="iconfont pay-icon" :class="mode.class"></view>
				<view class="u-flex-1 u-m-l-20">
					<view class="u-font-lg">{{mode.name}}支付 <text v-if="payExt[mode.key].recom" class="pay-recom">推荐</text></view>
					<view v-if="payExt[mode.key].des" class="u-font-xs">{{payExt[mode.key].des}}</view>
				</view>
				<view class="p-radio" :class="{checked:modes[curMode].key==mode.key}"></view>
			</view>
		</view>
		<view class="u-m-x-30 u-m-t-30">
			<view class="submit-btn" @tap="submit">
				支付 ¥{{curLeve.price}}
			</view>
		</view>
		<view class="u-p-20">
			
		</view>
		<!-- <view class="cu-bar foot padding-lr bg-white solid-top">
			<view class="flex align-end ">
				<text class="u-font-30">合计:</text>
				<text class="u-font-40 p-f-y">￥{{curLeve.price}}</text>
			</view>
			<view class="cu-btn round p-bg-y-gradu lg" @tap="submit">
				<text class="p-f-y-d">确认支付</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {unauthPath} from "@/utils/constant.js"
	import {jumpTo,delay} from "@/utils/util.js"
	import * as vipAPI from "@/api/vip.js"
	import {refreshUserInfo} from "@/api/user.js"
	import {getRule,CODES} from "@/utils/vip.js"
	import payAPI,{payModes} from "@/api/pay.js"
	import {mapGetters,mapActions} from "vuex"
	// #ifdef APP-PLUS
	let barColor = 0
	let window_android = null
	// #endif
	export default {
		data() {
			return {
				packs:[],
				pIdx:0,
				subIdx:0,
				payExt:{
					1:{des:'10亿用户都在用，真安全，更放心',recom:true},
					2:{des:'',recom:false},
					3:{des:'',recom:false},
				},
				modes: Object.values(payModes),
				curMode: 0
			}
		},
		computed:{
			...mapGetters('user',['isLogin','userInfo']),
			curPack(){
				return this.packs[this.pIdx]||{}
			},
			curLeve(){
				return this.curPack.leveList&&this.curPack.leveList[this.subIdx]||{}
			},
			badge(){
				return getRule(this.userInfo&&this.userInfo.vipLevelCode,CODES.HEAD_TAG)
			}
		},
		// #ifdef APP-PLUS
		beforeCreate() {
			if(plus.os.name=='Android'){
				var Color = plus.android.importClass("android.graphics.Color"); 
				plus.android.importClass("android.view.Window");
				var mainActivity = plus.android.runtimeMainActivity();    
				window_android = mainActivity.getWindow();    
				var WindowManager=plus.android.importClass("android.view.WindowManager");    
				barColor = window_android.getNavigationBarColor()
				window_android.setNavigationBarColor(Color.BLACK)
			}
		},
		beforeDestroy() {
			if(plus.os.name=='Android'){
				window_android.setNavigationBarColor(barColor)
			}
		},
		// #endif
		async onLoad() {
			this.packs = await vipAPI.getVipConfigs();
		},
		async onPullDownRefresh() {
			try{
				await refreshUserInfo().then(()=>{
					return this.fetchUserInfo()
				})
			}finally{
				uni.stopPullDownRefresh()
			}
		},
		methods: {
			...mapActions('user',['fetchUserInfo']),
			jumpTo,
			tabChange(index) {
				this.pIdx = index
				this.subIdx = 0
			},
			changeLeve(index){
				this.subIdx = index
			},
			modeChange(index) {
				this.curMode = index
			},
			
			async submit(){
				
				if(!this.isLogin){
					return jumpTo(unauthPath)
				}
				try {
					if (this.submit.lock) {
						throw new Error('请求处理中')
					}
					this.submit.lock = true;
					await payAPI.openVip({userId:this.userInfo.userId,vipId:this.curLeve.id,payplatForm:this.modes[this.curMode].key});
					// #ifdef H5
					await new Promise((resolve, reject) => {
						uni.showModal({
							content: '您是否已完成支付',
							cancelText: '未完成',
							confirmText: '已完成',
							success({
								confirm
							}) {
								confirm ? resolve() : reject()
							},
							fail: reject
						})
					})
					// #endif
					uni.showToast({
						title:'支付成功'
					})
					await delay(1000)
					refreshUserInfo().then(()=>{
						return this.fetchUserInfo()
					}).then(({vip})=>{
						if(vip){
							return
						}
						let count = 0
						const timer = setInterval(()=>{
							refreshUserInfo().then(()=>{
								return this.fetchUserInfo()
							}).then(({vip})=>{
								count ++
								if(vip||count>2){
									clearInterval(timer)
								}
							})
						},2000)
					})
					
					
				} catch (e) {
					console.error(e)
				} finally {
					this.submit.lock = false;
				}
			
			}
		}
	}
</script>
<style>
	page{
		background-color: #131210;
		color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.banner{
		position: relative;
		.img{
			width: 750rpx;
			height: 862rpx
		}
		.expire{
			position: absolute;
			top: 220rpx;
			left: 20rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
	.pick-box{
		white-space: nowrap;
		.item{
			width: 210rpx;
			height: 180rpx;
			background-color: rgba($color: #f9e3a1, $alpha: 0.15);
			border: 4rpx solid rgba($color: #f9e3a1, $alpha: 0.3);
			border-radius: 20rpx;
			padding: 20rpx 0;
			display: inline-flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			color: #f9e3a1;
			margin: 0 30rpx;
			&+.item{
				margin-left: 0rpx;
			}
			&.cur{
				border-color: #f9e3a1;
			}
		}
	}
	.p-radio {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 4rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: center;

		&.checked {
			background-color: #d8a732;
			color: #FFFFFF;
			border-color: #d8a732;

			&::before {
				content: "\e645";
				font-family: "cuIcon";
				font-size: 30rpx;
			}
		}
	}

	.pay-icon{
		font-size: 70rpx;
	}
	.pay-recom{
		$color:#dd6f40;
		font-size: 20rpx;
		margin-left: 16rpx;
		padding: 2rpx 8rpx;
		border-radius: 6rpx;
		background-color: $color;
		color: #FFFFFF;
		position: relative;
		&::before{
			content: "";
			display: block;
			border: 6rpx solid transparent;
			border-bottom-color: $color;
			border-left-color:$color;
			position: absolute;
			left: 0rpx;
			top: 50%;
			transform: translate(-50%,-50%) rotate(45deg);
		}
	}
	
	.submit-btn{
		background-image: linear-gradient(160deg,#ddc8af,#b69a7c);
		border-radius: 1000rpx;
		padding: 30rpx;
		text-align: center;
		font-size: 38rpx;
		font-weight: bold;
		color: #333333;
	}
</style>
